<template>
    <div class="container">
        <div class="box top">
            <div class="avator">
                <image :src="detail.headImg" mode="" />
            </div>
            <div class="name">{{detail.userName}}</div>
            <div class="address flex-v-center">
                <i class="icon-location"></i>
                {{ detail.province || detail.city ? (detail.province || '') + ' ' + (detail.city || '') : '未知'}}
            </div>
            <div class="btns">
                <div @click="editUserInfo" v-if="isMy && !detail.wxacodeUrl" class="edit btn">填写微信号</div>
                <div @click="addWechat" v-else class="btn" > <i class="icon-weixin1 mar-r20"></i> 加微信</div>
                <div @click="editUserInfo" v-if="isMy && !detail.userPhone"  class="edit btn">去填写手机号</div>
                <div @click="callPhone" v-else class="btn"> <i class="icon-phone mar-r20"></i> 打电话</div>
            </div>
            <span v-if="isMy" @click="editUserInfo" class="modify flex-v-center color-ccc" :class="{'color-red': !isFullImprove}">
                {{isFullImprove ? '修改' : '完善信息'}}
                <i class="fs24 mar-l5 icon-arrow-right"></i> 
            </span>
        </div>

        <div class="box job">
            <section>
                <div class="title">
                    <p>职业：</p>
                    <template v-if="isMy">
                        <span v-if="detail.userTypeNames && detail.userTypeNames.length" @click="modifyJob">修改 <i class="icon-arrow-right"></i></span>
                        <span v-else style="color: red" @click="modifyJob">完善信息<i class="icon-arrow-right"></i></span>
                    </template>
                </div>
                <div class="list">
                    <p v-for="(i, idx) in detail.userTypeNames" :key="idx">{{i.typeName}}</p>
                </div>
            </section>
            <section>
                <div class="title">
                    <p>行业/品牌：</p>
                    <template v-if="isMy">
                        <span v-if="detail.userIndustryNames && detail.userIndustryNames.length" @click="modifyIndustry">修改 <i class="icon-arrow-right"></i></span>
                        <span v-else style="color: red" @click="modifyIndustry">完善信息 <i class="icon-arrow-right"></i></span>
                    </template>
                </div>
                <div class="list">
                    <p v-for="(i, idx) in detail.userIndustryNames" :key="idx">{{i.industryName}}</p>
                </div>
            </section>
        </div>
        <div class="box job">
            <section>
                <div class="title">
                    <p>关于我：</p>
                    <span v-if="isMy" @click="editUserSign">{{isFullImprove ? '修改' : '完善信息'}} <i class="icon-arrow-right"></i></span>
                </div>
                <div class="desc">
                    <p>{{detail.userSign}}</p>
                </div>
            </section>
        </div>
        <div class="float_btn def_btn" v-if="addStatus == '00'">待验证</div>
        <template v-else>
            <div @click="addFriend" v-if="!isMy && addStatus != '01' && detail.infoId" class="float_btn red_btn">添加好友</div>
        </template>
        <uni-popup ref="adWxPopup" type="center">
            <div class="ad_wx_box">
                <div class="title">扫码添加微信</div>
                <div class="img pad-tb20 flex-center">
                    <image class="w300 h300" :src="detail.wxacodeUrl" mode="" />
                </div>
                <div class="tip flex-center">长按识别二维码添加</div>
                <!-- <div class="title">复制微信号</div>
                <div class="wx_num">微信号：{{detail.wxnum}}</div>
                <div class="tip">温馨提示：添加好友太多容易被微信封号哦，请酌情添加微信好友</div>
                <div @click="copyWxnum" class="copy_btn red_btn">复制微信号，去微信添加好友</div> -->
            </div>
        </uni-popup>   
        <improveInfo ref="improveInfo"></improveInfo>
        <jobPicker ref="jobPicker" multiple></jobPicker>
        <industryBrandPicker ref="industryBrandPicker" multiple></industryBrandPicker>

        <pub-text-editer ref="textEditer"></pub-text-editer>
    </div>
</template>

<script>
import improveInfo from '@/components/pages/improveInfo'
import jobPicker from '@/components/pages/jobPicker'
import industryBrandPicker from '@/components/pages/industryBrandPicker'
import { getUserCardInfo, editUserCardInfo, passUserAddtion, userAddtionUser } from '@/request/relationship'
export default {
    components: {
        industryBrandPicker,
        improveInfo,
        jobPicker
    },
    data() {
        return {
            addStatus: '',
            userId: '',
            isFriend: false,
            isMy: false,
            detail: {},
        }
    },
    computed: {
        isFullImprove() {
            return this.detail.userName && this.detail.city && this.detail.userPhone && this.detail.wxacodeUrl
        },
    },
    onLoad({id}) {
        this.userId = id
        this.getInfo()
    },
    methods: {
        getInfo() {
            getUserCardInfo({ toUserId: this.userId }).then(res => {
                this.isMy = res.data.isMy == '01'
                this.isFriend = res.data.addStatus == '01'
                this.addStatus = res.data.addStatus
                let detail = res.data.info
                try{
                    detail.userIndustryNames = JSON.parse(detail.userIndustryNames) || []
                } catch(err) {
                    detail.userIndustryNames = []
                }
                try{
                    detail.userTypeNames = JSON.parse(detail.userTypeNames) || []
                } catch(err) {
                    detail.userTypeNames = []
                }
                this.detail = detail
            })
        },
        editUserInfo() {
            this.$refs.improveInfo.edit(this.detail).then(() => {
                this.getInfo()
            })
        },
        modifyJob() {
            this.$refs.jobPicker.open({
                selected: this.detail.userTypeNames.map(i => ({
                    id: i.typeId + '',
                    typeName: i.typeName
                }))
            }).then(rst => {
                editUserCardInfo({
                    userTypeIds: rst.map(item => item.id).join(',') || '0'
                }).then(res => {
                    this.getInfo()
                })
                console.log(rst);
            })
        },
        modifyIndustry() {
            this.$refs.industryBrandPicker.open({
                selected: this.detail.userIndustryNames.map(i => ({
                    id: i.industryId,
                    industryName: i.industryName,
                }))
            }).then(rst => {
                editUserCardInfo({
                    userIndustryIds: rst.map(item => item.id).join(',') || '0'
                }).then(res => {
                    this.getInfo()
                })
            })
        },
        addWechat() {
            if(this.isFriend || this.isMy) {
                if(!this.detail.wxnum) return this.$interact.toast('暂未设置微信号')
                this.$refs.adWxPopup.open()
            } else {
                this.$interact.modal({
                    title: '提示',
                    content: '请先添加为好友，对方同意后即可互相查看联系方式',
                    showCancel: true,
                    confirmText: '申请添加'
                }).then(action => {
                    if(action.confirm) {
                        this.addFriend()
                    }  
                })
            }
        },
        copyWxnum() {
            uni.setClipboardData({
                data: this.detail.wxnum,
                success: () => {
                    this.$interact.toast('复制成功')
                    this.$refs.adWxPopup.close()
                }
            })
        },
        callPhone() {
            if(this.isFriend || this.isMy) {
                if(!this.detail.userPhone) return this.$interact.toast('暂未设置手机号')
                uni.makePhoneCall({
                    phoneNumber: this.detail.userPhone
                })
            } else {
                this.$interact.modal({
                    title: '提示',
                    content: '请先添加为好友，对方同意后即可互相查看联系方式',
                    showCancel: true,
                    confirmText: '申请添加'
                }).then(action => {
                    if(action.confirm) {
                        this.addFriend()
                    }  
                })
            }


        },
        editUserSign() {
            this.$refs.textEditer.open({
                title: '编辑“关于我”',
                placeholder: '请简单介绍自己，说说你能提供什么，你需要什么',
                content: this.detail.userSign || ''
            }).then(rst => {
                editUserCardInfo({
                    userSign: rst
                }).then(res => {
                    this.getInfo()
                })
            })
        },
        addFriend() {
            console.log(this.$store.state.user.userInfo.vip);
            if(this.$store.state.user.userInfo.vip != '01') {
                return this.$interact.modal({
                    title: '添加人数已达上限',
                    content: '您今天的申请添加次数已达上限，成为VIP获取更多次数',
                    showCancel: true,
                    confirmText: '开通会员'
                }).then(action => {
                    if(action.confirm) {
                        this.$navigate.toVip()
                    }
                })
            }
            if(this.detail.addStatus == '00') return ;
            userAddtionUser({
                toUserId: this.detail.userId
            }).then(res => {
                this.addStatus = '00'
                this.$interact.toast('添加好友申请已发送')  
            })
        },
    }

}
</script>

<style lang="less" scoped>
    .container{
        padding: 30rpx 0 120rpx 0;
    }
    .box{
        width: 690rpx;
        margin: 0 auto 30rpx;
        background: #fff;
        padding: 30rpx;
        border-radius: 20rpx;
    }
    .top{
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        .modify{
            position: absolute;
            right: 30rpx;
            top: 20rpx;
        }
        .avator{
            width: 110rpx;
            height: 110rpx;
            image{
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
        .name{
            font-size: 36rpx;
            font-weight: bold;
            margin-top: 20rpx;
        }
        .address{
            margin-top: 10rpx;
            color: #666;
        }
        .btns{
            display: flex;
            justify-content: space-between;
            width: 100%;
            .btn{
                width: 290rpx;
                margin-top: 20rpx;
                height: 88rpx;
                font-size: 34rpx;
                color: #333;
                border-radius: 50rpx;
                border: 1px solid #eee;
                .align(center);
                &.edit{
                    background: #f2f2f2;
                    border: 0;
                }
            }
        }
    }

    .job{
        .title{
            height: 80rpx;
            margin-bottom: 20rpx;
            display: flex;
            align-items: center;
            p{
                font-size: 36rpx;
                font-weight: bold;
                flex: 1;
                color: #333;
            }
            span{
                display: flex;
                align-items: center;
                color: #ccc;
                i{
                    font-size: 26rpx;
                    margin-right: 10rpx;
                }
            }
        }
        .list{
            display: flex;
            flex-wrap: wrap;
            p{
                height: 58rpx;
                line-height: 58rpx;
                background: #f2f2f2;
                padding: 0 30rpx;
                margin-right: 20rpx;
                margin-bottom: 20rpx;
                color: #666;
            }
        }
    }
    .red_btn{
        height: 90rpx;
        border-radius: 50rpx;
        font-size: 34rpx;
        background: @mainColor;
        color: #fff;
        .align(center);
    }
    .def_btn{
        background: #fff;
        border: 1px solid #eee;
        height: 90rpx;
        border-radius: 50rpx;
        .align(center);
    }
    .float_btn{
        width: 690rpx;
        position: fixed;
        left: 30rpx;
        bottom: 30rpx;
    }

    .ad_wx_box {
        width: 600rpx;
        padding: 30rpx;
        border-radius: 15rpx;
        background: #fff;
        color: #333;
        .title{
            font-size: 36rpx;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20rpx;
        }
        .wx_num{            
            margin-bottom: 30rpx;
            font-size: 36rpx;
            font-weight: bold;
        }
        .tip{
            font-size: 32rpx;
            color: #999;
            margin-bottom: 40rpx;
            line-height: 1.6;
            font-size: 28rpx;
        }


    }
</style>